<!DOCTYPE html>
<html lang='zh-CN'>

<head>
  <meta charset='UTF-8'>
  <title>Document</title>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>
  <div id='app' v-cloak>
    <transition-group appear name="list" @before-appear="beforeAppear" @after-appear="afterAppear">
      <div class="list" v-for="(item,index) in list" :key="item.id" :data-index="index">
        <span>Number <i>{{item.id}}</i></span>
        <span>Name <i>{{item.name}}</i></span>
        <span>Age <i>{{item.age}}</i></span>
        <button @click="del(index)">删 除</button>
      </div>

      <div class="list input-list" key="input" :data-index="list.length">
        <input type="text" v-model="id" placeholder="学号">
        <input type="text" v-model="name" placeholder="姓名">
        <input type="text" v-model="age" placeholder="年龄">
        <button class="new" @click="add">添 加</button>
      </div>
    </transition-group>
  </div>
  <script src='vue.js'></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        list: [{
          id: 1,
          name: '小王',
          age: 15
        }, {
          id: 2,
          name: '小明',
          age: 21
        }, {
          id: 3,
          name: '小刚',
          age: 17
        }, {
          id: 4,
          name: '小强',
          age: 24
        }, {
          id: 5,
          name: '大李',
          age: 22
        }],
        id: null,
        name: null,
        age: null
      },
      methods: {
        add() {
          let obj = {
            id: this.id,
            name: this.name,
            age: this.age
          };
          this.list.push(obj)
          this.id = this.name = this.age = null
        },
        del(index) {
          this.list.splice(index, 1)
        },
        beforeAppear(el) {
          const index = el.dataset.index;
          el.style.transitionDelay = `${index * 0.25}s`;
        },
        afterAppear(el) {
          const index = el.dataset.index;
          el.style.transitionDelay = '0s';
        }
      }
    })
  </script>
  <style>
    body {
      padding: 0;
      margin: 0;
    }

    :root {
      background-color: lightgrey;
    }

    .list-enter-active,
    .list-leave-active {
      transition: all 1s;
    }

    .list-enter,
    .list-leave-to {
      opacity: 0;
      transform: translateY(30px);
    }

    .list-leave-active {
      position: absolute;
      width: 400px;
    }

    .list-move {
      transition: transform 1s;
    }

    #app>span {
      position: relative;
      display: block;
      box-sizing: border-box;
    }

    .list {
      background: white;
      padding: 20px;
      margin: 20px;
      /* width: 650px; */
    }

    .list span {
      margin-right: 20px;
      color: gray;
    }

    .list span i {
      color: #333;
      font-weight: bold;
    }

    .list button {
      float: right;
      background-color: lightsalmon;
      border: 1px solid orangered;
      color: #333;
    }

    .input-list .new {
      background-color: aquamarine;
      border: 1px solid green;
    }
  </style>
</body>

</html>